import React, { useEffect } from "react";
import Navbar from "../../compoents/Navbar";
import { useNavigate } from "react-router-dom";
import { useSelector } from 'react-redux'
import type { RootState } from '../../store/store'
import style from "./index.module.css";
import request from "../../api/request";
import { CheckShieldOutline } from "antd-mobile-icons";
import img1 from "../../assets/img103.jpg";
import img2 from "../../assets/img203.jpg";
import img3 from "../../assets/img303.jpg";
import cat1 from "../../assets/icon103.jpg";
import cat2 from "../../assets/icon203.jpg";
import cat3 from "../../assets/icon303.jpg";
import cat4 from "../../assets/icon403.jpg";
import cat5 from "../../assets/icon503.jpg";
import { SearchBar } from 'antd-mobile'
import { DownOutline } from 'antd-mobile-icons'
type Hospital = {
  socoimage: string;
  nosocomium: string;
  socostate: string;
  socolv: string;
  socodescword: string;
  sococity: string;
};

function Index() {
  const navigate = useNavigate();

  // 获取医院信息
  const currentCity = useSelector((state: RootState) => state.UseStateList.currentCity)
  const [hospiltalList, setHospitalList] = React.useState<Hospital[]>([]);
  const pageCode = 1;
  const pageSize = 10;

  useEffect(() => {
    const fetchList = async () => {
      const res: { code: number; data: Hospital[] } = await request.get("/api/nosocomium/list", {
        params: { pageCode, pageSize },
      });
      if (res.code === 20000) {
        setHospitalList(res.data);
      }
    };
    fetchList();
  }, []);

  return (
    <div className={style.YuBox}>
      <Navbar
        onBack={() => navigate(-1)}
        showBack
        title="网上预约挂号_在线资讯医生_就医挂号服务"
      />

      <div className={style.beijing}>
        <div className={style.dingwei}>
            <span className={style.bj} onClick={()=>navigate('/City')}>{currentCity}</span>
            <SearchBar onFocus={()=>navigate('/GuaSearch')} className={style.search} placeholder='搜索医院、科室、医生' />
          </div>

          <div className={style.YuCard1}>
            <div className={style.YuSpanIcon}>
              <span><CheckShieldOutline /> 官方号源</span>
              <span><CheckShieldOutline /> 医生本人</span>
              <span><CheckShieldOutline /> 平台认证</span>
              <span><CheckShieldOutline /> 诊前退款</span>
            </div>

            <div className={style.card2}>
              <span>
                <img className={style.cardimg} src={img1} alt="" />
              </span>
              <span>
                <img className={style.cardimg} src={img2} alt="" />
              </span>
              <span>
                <img className={style.cardimg} src={img3} alt="" />
              </span>

              <span className={style.cardtit1}>按医院</span>
              <span className={style.cardtit1}>按科室</span>
              <span className={style.cardtit1}>按医生</span>

              <span className={style.cardtit2}>全国知名医院</span>
              <span className={style.cardtit2}>按科室挂号</span>
              <span className={style.cardtit2}>全国知名专家</span>
            </div>

          <div className={style.catGrid}>
            {[
              { name: '内科', icon: cat1 },
              { name: '外科', icon: cat2 },
              { name: '皮肤科', icon: cat3 },
              { name: '男科', icon: cat4 },
              { name: '妇产科', icon: cat5 },
            ].map((item, i) => (
              <div key={i} className={style.catItem}>
                <span className={style.catIcon}>
                  <img src={item.icon} alt={item.name} />
                </span>
                <span className={style.catText}>{item.name}</span>
              </div>
            ))}
          </div>
          </div>

          

          <div className={style.myOrder}>
            <div className={style.myOrderLeft}>
              <span className={style.orderIcon}>🗓️</span>
              <span className={style.orderText}>我的挂号</span>
            </div>
            <span className={style.huise}>查看记录 ＞</span>
          </div>

        <div className={style.YuCard2}>
          <div className={style.cardh2}>
            <h2>热门医院</h2> <span className={style.huise}>更多</span>
          </div>

          <div className={style.hotHis}>
            {hospiltalList.length > 0 &&
              hospiltalList.map((item: Hospital, index: number) => (
                <div key={index} className={style.hotHisspan}>
                  <div className={style.imgbox}>
                    <img src={item.socoimage} alt="" />
                  </div>

                  <div>
                    <h3>{item.nosocomium}</h3>

                    <div className={style.gongli}>
                      <span>{item.socostate}</span>
                      <span>{item.socolv}</span>
                    </div>

                    <div className={style.keshi}>
                      <p className={style.chaochu}>科室:{item.socodescword}</p>
                      <p className={style.chaochu}>地址:{item.sococity}</p>
                    </div>
                  </div>

                  <span className={style.huise}>＞99</span>
                </div>
              ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;
